<template>
  <div id="login-container">
    <div class="sys">
      <div>
        <img src="@img/logo.svg" alt="" />
      </div>
      <div>自如图书馆座位在线预约管理系统</div>
    </div>
    <div id="account-box" :class="isRegisterActive">
      <div
        @click="changeRegisterActive"
        id="show-register-box"
        :title="notRegister ? 'Register' : 'Login'"
      >
        {{ status }}
      </div>
      <div id="login-box">
        <div id="login-title">用户登录</div>
        <div id="login-form">
          <div id="login-username">
            <span>用户名 </span>
            <input
              type="text"
              v-model="lUsername"
              maxlength="8"
              name="lUsername"
              placeholder="请输入用户名"
            />
          </div>
          <div id="login-password">
            <span>密码 </span>
            <input
              type="password"
              v-model="lPassword"
              maxlength="24"
              placeholder="请输入密码"
            />
          </div>
          <div id="pw-group"></div>
          <button id="login-button" @click="login" :class="loginActive">
            登录
          </button>
        </div>
      </div>
      <div :class="isRegisterActive" id="register-box">
        <div id="register-title">注册账号</div>
        <div id="register-form">
          <div id="register-username">
            <span>用户名 </span
            ><span class="hint" v-show="!isRUsername">3-18个字符</span>
            <input
              type="text"
              v-model="rUsername"
              minlength="3"
              maxlength="8"
              placeholder="请输入用户名"
            />
          </div>
          <div id="register-password">
            <span>密码 </span
            ><span class="hint" v-show="!isRPassword"
              >6-24个字符(数字与字母的组合)</span
            >
            <input
              type="password"
              v-model="rPassword"
              minlength="6"
              maxlength="24"
              placeholder="请输入密码"
            />
          </div>
          <div id="register-email">
            <span>确认密码 </span
            ><span class="hint" v-show="!isRRepeatPassword">与密码一致</span>
            <input
              type="password"
              v-model="rRepeatPassword"
              minlength="6"
              maxlength="24"
              placeholder="再次输入密码"
            />
          </div>
        </div>
        <button id="register-button" @click="register" :class="registerActive">
          注册
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { login, register, hasUser } from "@network/user";

export default {
  components: {},
  data() {
    return {
      isRegisterActive: "",
      lUsername: "",
      lPassword: "",
      rUsername: "",
      rPassword: "",
      rRepeatPassword: "",
      validUsername: /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,8}$/,
      validPassword: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,24}$/,
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    type() {
      if (this.noUser) return 3;
      return this.userInfo.username !== "admin" ? 0 : 1;
    },
    noUser() {
      return typeof this.userInfo?.username != "string";
    },
    isManager() {
      return this.type === 1;
    },
    isStudent() {
      return this.type === 0;
    },
    notRegister() {
      return this.isRegisterActive === "";
    },

    status() {
      return this.notRegister ? "注册" : "登录";
    },
    isLoginBtnValid() {
      return this.isLPassword && this.isLUsername;
    },
    isRegisterBtnValid() {
      return this.isRUsername && this.isRPassword && this.isRRepeatPassword;
    },
    loginActive() {
      return this.isLoginBtnValid ? "active-btn" : "inactive-btn";
    },
    registerActive() {
      return this.isRegisterBtnValid ? "active-btn" : "inactive-btn";
    },
    isLUsername() {
      return this.lUsername.trim().length;
    },
    isLPassword() {
      return this.lPassword.length;
    },
    isRUsername() {
      return this.validUsername.exec(this.rUsername);
    },
    isRPassword() {
      return this.validPassword.exec(this.rPassword);
    },
    isRRepeatPassword() {
      return this.isRPassword && this.rPassword === this.rRepeatPassword;
    },
  },
  watch: {
    notRegister(newV) {
      if (newV) {
        this.clearRegisterForm();
      } else {
        this.clearLoginForm();
      }
    },
  },

  methods: {
    ...mapMutations(["setIdentify"]),
    clearRegisterForm() {
      this.rUsername = "";
      this.rPassword = "";
      this.rRepeatPassword = "";
    },
    clearLoginForm() {
      this.lUsername = "";
      this.lPassword = "";
    },
    ...mapMutations(["setUserInfo"]),
    changeRegisterActive() {
      this.isRegisterActive =
        this.isRegisterActive === "" ? "register-active" : "";
    },

    async login() {
      if (this.isLoginBtnValid) {
        let username = this.lUsername,
          password = this.lPassword;

        await login({ username, password }).then((res) => {
          console.log("res", res);
          if (res.data.tag) {
            localStorage.library_sys_token = res.data.token;
            this.setUserInfo({ username });
            this.$message.success("登录成功");
            if (this.lUsername === "admin") {
              this.setIdentify(1);
              this.$router.push("/manager");
            } else {
              this.setIdentify(0);
              this.$router.push("/student");
            }
          } else {
            if (res.data.msg) {
              this.$message.error(res.data.msg);
            } else {
              this.$message.error("帐号或密码错误");
            }
          }
        });
      }
    },
    async register() {
      if (this.isRegisterBtnValid) {
        let username = this.rUsername,
          password = this.rPassword;
        await hasUser(username).then(async (has_user) => {
          if (has_user.data.tag) {
            this.$message.error("该用户名已被注册");
          } else {
            await register({ username, password }).then((res) => {
              if (res.data.tag) {
                this.$confirm("注册成功,是否现在登录?", "用户登录", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  closeOnClickModal: false,
                  type: "success",
                })
                  .then(() => {
                    this.lUsername = this.rUsername;
                    this.lPassword = this.rPassword;
                    this.login();
                  })
                  .catch(() => {
                    this.clearRegisterForm();
                  });
              } else {
                this.$message.error("注册失败,请稍候重试");
              }
            });
          }
        });
      }
    },
  },
  created() {
    if (this.isManager) {
      this.$router.push("/manager");
    } else if (this.isStudent) {
      this.$router.push("/student");
    }
  },
  mounted() {},
};
</script>
<style scoped>
#login-container {
  color: #414141;
  background: linear-gradient(
    45deg,
    rgba(66, 183, 245, 0.8) 0%,
    rgba(66, 245, 189, 0.4) 100%
  );
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
}
#login-container #account-box {
  width: 600px;
  border-radius: 5px;
  background-color: white;
  position: relative;
  height: 420px;
  max-height: 90vh;
  overflow-y: auto;
  transition: height 0.2s ease-in-out;
  max-width: 90vw;
}
#login-container #account-box #login-tips {
  position: absolute;
  display: inline-block;
  background-color: #2196f3;
  color: #fff;
}
#login-container #account-box #login-tips::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #2196f3;
}
#login-container #account-box.register-active {
  height: 460px;
}
#login-container #account-box #show-register-box {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: #2196f3;
  border-radius: 50%;
  right: 20px;
  top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  animation: at-ripple 1.5s linear infinite;
  z-index: 6;
  user-select: none;
}
#login-container #account-box #show-register-box:hover {
  animation: at-ripple 0.6s linear infinite, jump 0.2s linear 1,
    jump2 0.2s linear 0;
}
#login-container #account-box #show-register-box:active {
  animation: at-ripple 0.6s linear infinite, jump2 0.2s linear 1;
}
#login-container #account-box #show-register-box::before {
  content: "";
  position: absolute;
  height: 40px;
  width: 2px;
  background-color: #2196f3;
  display: block;
  top: -40px;
  z-index: 5;
}
#login-container #login-box,
#login-container #register-box {
  padding: 60px 60px 30px 60px;
  box-sizing: border-box;
}
#login-container #login-box #login-title,
#login-container #register-box #login-title {
  font-size: 1.6rem;
  color: #2196f3;
  margin-bottom: 15px;
}
#login-container #login-box #login-form,
#login-container #register-box #login-form {
  margin: 15px 0;
}
#login-container #login-box #login-form #login-username,
#login-container #register-box #login-form #login-username,
#login-container #login-box #login-form #login-password,
#login-container #register-box #login-form #login-password {
  font-size: 0.8rem;
}
#login-container #login-box #login-form #login-username input,
#login-container #register-box #login-form #login-username input,
#login-container #login-box #login-form #login-password input,
#login-container #register-box #login-form #login-password input {
  border: 0;
  outline: none;
  padding: 12px;
  margin: 10px 0 15px 0;
  width: calc(100% - 24px);
  background-color: #e0e0e0;
  border-radius: 3px;
}
#login-container #login-box #login-form #pw-group,
#login-container #register-box #login-form #pw-group {
  display: flex;
  margin-bottom: 35px;
}
#login-container #login-box #login-form #pw-group span,
#login-container #register-box #login-form #pw-group span {
  flex: 1;
}
#login-container #login-box #login-form #pw-group span:nth-child(2),
#login-container #register-box #login-form #pw-group span:nth-child(2) {
  color: #2196f3;
  justify-content: flex-end;
  text-align: right;
}
#login-container #login-box #login-form #login-button,
#login-container #register-box #login-form #login-button {
  color: #fff;
  outline: none;
  margin: 15px auto;
  padding: 15px 0;
  width: 80%;
  border: none;
  border-radius: 3px;
  display: block;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

#login-container #register-box {
  position: absolute;
  width: 90vw;
  max-width: 600px;
  top: -500px;
  transition: top 0.2s ease-in-out;
  background-color: white;
  z-index: 2;
}
#login-container #register-box.register-active {
  top: 0;
}
#login-container #register-box #register-title {
  font-size: 1.6rem;
  color: #2196f3;
  margin-bottom: 15px;
}
#login-container #register-box #register-form {
  margin: 15px 0;
}
#login-container #register-box #register-form #register-username,
#login-container #register-box #register-form #register-password,
#login-container #register-box #register-form #register-email {
  font-size: 0.8rem;
}
#login-container #register-box #register-form #register-username input,
#login-container #register-box #register-form #register-password input,
#login-container #register-box #register-form #register-email input {
  border: 0;
  outline: none;
  padding: 12px;
  margin: 10px 0 15px 0;
  width: calc(100% - 24px);
  background-color: #e0e0e0;
  border-radius: 3px;
}
#login-container #register-box #register-button {
  color: #fff;
  outline: none;
  margin: 15px auto;
  padding: 15px 0;
  width: 80%;
  border: none;
  border-radius: 3px;
  display: block;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

@media screen and (max-width: 480px) {
  #account-box {
    height: 80vh !important;
    margin-top: 120px;
  }

  #login-box,
  #login-container #register-box,
  #register-box {
    padding: 120px 20px 30px 20px !important;
  }
  #login-box #login-title,
  #login-box #register-title,
  #register-box #login-title,
  #register-box #register-title {
    font-size: 1.2rem !important;
    font-weight: bold;
  }
  #login-box #login-button,
  #login-box #register-button,
  #register-box #login-button,
  #register-box #register-button {
    width: 90% !important;
  }
}
@keyframes at-ripple {
  0% {
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.1),
      0 0 0 0 rgba(33, 150, 243, 0.1), 0 0 0 5px rgba(33, 150, 243, 0.1),
      0 0 0 10px rgba(33, 150, 243, 0.1);
  }
  100% {
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.1),
      0 0 0 5px rgba(33, 150, 243, 0.1), 0 0 0 10px rgba(33, 150, 243, 0.1),
      0 0 0 20px rgba(33, 150, 243, 0);
  }
}
@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes jump2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

.inactive-btn {
  background-color: #b0d2ee;
  pointer-events: none;
}
.active-btn {
  background-color: rgb(33, 150, 243);
}

.active-btn:active {
  background-color: #0d8aee !important;
}
.active-btn:hover {
  background-color: #39a1f4;
}

.hint {
  color: red;
  font-size: 0.8rem;
}

.hint::before {
  content: "* ";
}

.hint::after {
  content: " *";
}

.sys {
  width: 100vw;
  padding: 20px 0;
  height: 120px;
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  align-items: center;
  font-size: 32px;
  color: white;
}

.sys img {
  height: 78px;
  width: 78px;
}

@media screen and (max-width: 480px) {
  .sys img {
    height: 48px;
    width: 48px;
  }

  .sys {
    font-size: 20px;
  height: 80px;
  padding: 10px 0;
  }
}
</style>
